<template>
    <div class="main forecast">
        <div class="select-box">
            <div class="clearfix">
                <div class="select" id="kucundalei">
                    <div class="th">库存大类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="kucundalei" value="" />
                        <ul class=""></ul>
                    </div>
                </div>
                <div class="select cur" id="kucunxiaolei">
                    <div class="th">库存小类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="kucunxiaolei" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select" id="wuliaobianhao">
                    <div class="th">物料编号</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="wuliaobianhao" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划类别</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="jihualeibie" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">智能分类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="zhinengfenlei" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">采购员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="caigouyuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">Sourcing</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="sourcing" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" data="" name="jihuayuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">需求日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="jueceriqi" id="calend" value="" readonly="readonly" />
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <div class="operation">
                    <div class="query" v-on:click="proposalMap0Data(isSeach = true);curShow(0);">查询</div>
                    <div class="reset" v-on:click="proposalMap0Data(isSeach = false);">重置</div>
                </div>
            </div>
        </div>
        <div class="frame">
        	<div class="dateTab clearfix">
    			<span :class="{'cur':index==curNum}" v-on:click="curShow(index);proposalMap0Data(1,'',li.key)" :data-ins="li.key" v-for="(li,index) in selectWeekData">{{li.name}}</span>
    			<!--<ul class="list">
    				<li :class="{'cur':index==curNum}" v-on:click="curShow(index);proposalMap0Data(1,'',li.key)" :data-ins="li.key" v-for="(li,index) in selectWeekData">{{li.name}}</li>
    			</ul>-->
    			<!--<div class="leftArrow cur"></div>
    			<div class="rightArrow"></div>-->
    		</div>
    		<div class="frame-loadding80" v-if="tableLoadding"></div>
        	<div class="frame-content" v-if="tableShow">
		        <table border="1" cellspacing="0" cellpadding="0" class="table">
		            <tr class="tdWidth">
		                <td width=""></td>
		                <td width=""></td>
		                <td width="5%"></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		                <td width=""></td>
		            </tr>
		            <tr class=bg-f1f1f1>
		                <td rowspan="2">
		                    <!--<span class="checkbox cur"></span>-->
		                    <span>物料</span>
		                </td>
		                <td rowspan="2">描述</td>
		                <td rowspan="2">来源</td>
		                <td colspan="3" :class="{'grayTitle':index<week_day-1}" v-for="(title,index) in tableTitle">{{title}}</td>
		            </tr>
		            <tr class=bg-f1f1f1>
		            	<template v-for="(title,index) in tableTitle">
		            		<td :class="{'grayTitle':index<week_day-1}">原材料需求</td>
			                <td :class="{'grayTitle':index<week_day-1}">人工<br />调整</td>
			                <td :class="{'grayTitle':index<week_day-1}">汇总</td>
		            	</template>
		            </tr>
		            <tr v-for="(tr,index) in tableList.items">
		                <td rowspan="3" v-if="index%3==0">
		                    <span class="item fontsize15 word-break show click_link" :val="tr.item" v-on:click="checkFunction(index,tr.item,tableList.page)">{{tr.SEGMENT1}}</span>
		                </td>
		                <td rowspan="3" v-if="index%3==0" class="overflowHidden" :title="tr.DESCRIPTION">{{tr.DESCRIPTION.substr(0, 20)}}</td>
		                <td>{{tr.name}}</td>
		                <td :class="{'grayTd':week_day>1}">{{tofixeds(tr.a)}}</td>
		                <td :class="{'grayTd':week_day>1}" v-if="tr.name=='模型预测'"><input v-if="week_day<=1" :data-ins="parseInt(index/3)" type="text" v-model="tr.a1" v-on:change="addNum(tr,1)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>1}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>1}">{{tofixeds(tr.a2)}}</td>
		                <td :class="{'grayTd':week_day>2}">{{tofixeds(tr.b)}}</td>
		                <td :class="{'grayTd':week_day>2}" v-if="tr.name=='模型预测'"><input v-if="week_day<=2" :data-ins="parseInt(index/3)" type="text" v-model="tr.b1" v-on:change="addNum(tr,2)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>2}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>2}">{{tofixeds(tr.b2)}}</td>
		                <td :class="{'grayTd':week_day>3}">{{tofixeds(tr.c)}}</td>
		                <td :class="{'grayTd':week_day>3}" v-if="tr.name=='模型预测'"><input v-if="week_day<=3" :data-ins="parseInt(index/3)" type="text" v-model="tr.c1" v-on:change="addNum(tr,3)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>3}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>3}">{{tofixeds(tr.c2)}}</td>
		                <td :class="{'grayTd':week_day>4}">{{tofixeds(tr.d)}}</td>
		                <td :class="{'grayTd':week_day>4}" v-if="tr.name=='模型预测'"><input v-if="week_day<=4" :data-ins="parseInt(index/3)" type="text" v-model="tr.d1" v-on:change="addNum(tr,4)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>4}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>4}">{{tofixeds(tr.d2)}}</td>
		                <td :class="{'grayTd':week_day>5}">{{tofixeds(tr.e)}}</td>
		                <td :class="{'grayTd':week_day>5}" v-if="tr.name=='模型预测'"><input v-if="week_day<=5" :data-ins="parseInt(index/3)" type="text" v-model="tr.e1" v-on:change="addNum(tr,5)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>5}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>5}">{{tofixeds(tr.e2)}}</td>
		                <td :class="{'grayTd':week_day>6}">{{tofixeds(tr.f)}}</td>
		                <td :class="{'grayTd':week_day>6}" v-if="tr.name=='模型预测'"><input v-if="week_day<=6" :data-ins="parseInt(index/3)" type="text" v-model="tr.f1" v-on:change="addNum(tr,6)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>6}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>6}">{{tofixeds(tr.f2)}}</td>
		                <td :class="{'grayTd':week_day>7}">{{tofixeds(tr.g)}}</td>
		                <td :class="{'grayTd':week_day>7}" v-if="tr.name=='模型预测'"><input v-if="week_day<=7" :data-ins="parseInt(index/3)" type="text" v-model="tr.g1" v-on:change="addNum(tr,7)" class="td-input" value="" /></td>
		                <td :class="{'grayTd':week_day>7}" v-if="tr.name!='模型预测'"></td>
		                <td :class="{'grayTd':week_day>7}">{{tofixeds(tr.g2)}}</td>
		            </tr>
		        </table>
		        <div class="table-tr" v-if="tableList.pages>1">
		            <div class="pageturn">
		                                共
		                <em>{{tableList.total}}</em>
		                                条，第
		                <em>{{tableList.page}}</em>
		                /
		                <em>{{tableList.pages}}</em>
		                                页，跳转到第
		                <input type="text" class="pageturn-ipt" v-model="iptPage" value="" />
		                                页
		                <span class="page-turn" v-on:click="proposalMap0Data(iptPage,tableList.page)">跳转</span>
		                <span class="page-first" v-on:click="proposalMap0Data(1,tableList.page)">首页</span>
		                <span class="page-up" v-on:click="proposalMap0Data(tableList.page-1>0?tableList.page-1:1,tableList.page)">上一页</span>
		                <span class="page-down" v-on:click="proposalMap0Data(tableList.page+1,tableList.page)">下一页</span>
		                <span class="page-last" v-on:click="proposalMap0Data(tableList.pages,tableList.page)">末页</span>
		            </div>
		        </div>
		        <div class="operation">
		        	<!--<div class="gay-Btn">复制人工调整</div> -->
		        	<div class="mapYTitle">状态：<em>已保存</em></div>
		        	<div class="gay-Btn" v-on:click="saveFunction()">保存当前需求</div>
		        	<!--<div class="gay-Btn">导入智能采购</div>-->
		        </div>
		    </div>
        	<div class="frame-noData" v-if="noData0">暂无数据...</div>
        </div>
        <div class="frame" v-if="frameShow">
        	<div class="frame-loadding80" v-if="tableLoadding1"></div>
        	<div class="frame-content " v-show="tableShow1">
        		<div class="mapTops pr">
        			<div class="mapTitle pa">{{mapTitle}}</div>
        		</div>
		        <div id="forecastMap0">
		            echarts图形预留
		        </div>
		    </div>
        	<div class="frame-noData"  v-if="noData1">暂无数据...</div>
        </div>
    </div>
</template>

<script>
	import calender from '../common/js/calender';
    import common from '../common/js/common';
    import headers from './login';
    import tpls from '../common/js/tpls';
    import echarts from 'echarts';
    export default{
        components:{
        },
        data(){
            return{
            	tofixeds:function(data){
            		return common.tofixeds(data);
            	},
            	tableLoadding:true,
            	tableLoadding1:true,
            	tableShow:false,
            	tableShow1:false,
            	tableTitle:[],
            	tableList:[],
                postData:{
                	"item_big_class":"",
	                "item_small_class":"",
	                "item":"",
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "demand_date":"",
	                "page":1
                },
                postData1:{
	                "item_big_class":"",
	                "item_small_class":"",
	                "item":"1.1.01.04.10716",
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "demand_date":"",
	                "page":1
	            },
                iptPage:"",
            	mapTitle:"",
            	checkThis:-1,
            	checkThisPage:1,
            	isSeach:false,
            	noData0:false,
            	noData1:false,
            	frameShow:false,
            	selectWeekData:[],
            	curNum:0,
            	postWrite:[],
            	week_day:0
            }
        },
        methods:{
        	curShow:function(index){
        		this.curNum = index;
        	},
        	addNum:function(tr,index){
        		this.postWrite.push({
        			"item":tr.item,
        			"date":$(".dateTitle").eq(index-1).text().substr(0, 10),
        			"data":tr[returnNmae(index)]
        		});
        		function returnNmae(num){
        			switch(index){
	        			case 1:
	        				return "a1";
	        			break;
	        			case 2:
	        				return "b1";
	        			break;
	        			case 3:
	        				return "c1";
	        			break;
	        			case 4:
	        				return "d1";
	        			break;
	        			case 5:
	        				return "e1";
	        			break;
	        			case 6:
	        				return "f1";
	        			break;
	        			case 7:
	        				return "g1";
	        			break;
	        		}
        		}
        		switch(index){
        			case 1:
        				tr.a2 = parseFloat(tr.a) + (isNaN(parseFloat(tr.a1))?0:parseFloat(tr.a1));
        			break;
        			case 2:
        				tr.b2 = parseFloat(tr.b) + (isNaN(parseFloat(tr.b1))?0:parseFloat(tr.b1));
        			break;
        			case 3:
        				tr.c2 = parseFloat(tr.c) + (isNaN(parseFloat(tr.c1))?0:parseFloat(tr.c1));
        			break;
        			case 4:
        				tr.d2 = parseFloat(tr.d) + (isNaN(parseFloat(tr.d1))?0:parseFloat(tr.d1));
        			break;
        			case 5:
        				tr.e2 = parseFloat(tr.e) + (isNaN(parseFloat(tr.e1))?0:parseFloat(tr.e1));
        			break;
        			case 6:
        				tr.f2 = parseFloat(tr.f) + (isNaN(parseFloat(tr.f1))?0:parseFloat(tr.f1));
        			break;
        			case 7:
        				tr.g2 = parseFloat(tr.g) + (isNaN(parseFloat(tr.g1))?0:parseFloat(tr.g1));
        			break;
        		}
        	},
        	selectWeek:function(){
        		var dataThis = this;
        		common.getData(0,common.url_constitute.forecastMpa0,"post",{},function(data){
	                dataThis.selectWeekData = data.data.result;
	            });
        	},
        	checkFunction:function(index,item,page){
        		if(this.checkThis != index){	//判断点击的是否是已经选中的
        			this.checkThis = index;
        			this.checkThisPage = page;
        			var dataThis = this;
        			dataThis.frameShow = true;
        			dataThis.tableLoadding1 = true;	//显示loadding
        			dataThis.tableShow1 = false;		//隐藏数据dom
        			dataThis.postData1.item = item;
        			dataThis.postData1.demand_date = $(".dateTab .cur").attr("data-ins");
        			common.getData(1,common.url_constitute.forecastMpa2,"post",dataThis.postData1,function(data){
		          		dataThis.tableLoadding1 = false;	//隐藏loadding
		          		if(data.data.code==1024){
		          			if(data.data.result.length<1){
		                		dataThis.tableShow1 = false;
		                		dataThis.noData1 = true;
		                	}else{
		                		dataThis.tableShow1 = true;		//显示数据dom
		                		dataThis.noData1 = false;
			          			var xAxis = [];			//x坐标数据
				          		var freeze_demand = [];	//折线-冻结需求数据
				          		var final_predict = [];	//折线-最终预测需求数据
				          		var sum	= [];			//折线-合计数据
				          		dataThis.mapTitle = "物料： "+data.data.result[0].item;
				          		for(var i=0;i<data.data.result.length;i++){
				          			xAxis.push(data.data.result[i].TRANSACTION_DATE);
				          			freeze_demand.push(data.data.result[i].freeze_demand);
				          			final_predict.push(data.data.result[i].final_predict);
				          			sum.push(data.data.result[i].sum);
				          		}
				          		tpls.forecastMap0.xAxis.data = xAxis;
				          		tpls.forecastMap0.series[0].data = freeze_demand;
				          		tpls.forecastMap0.series[1].data = final_predict;
				          		tpls.forecastMap0.series[2].data = sum;
				          		var forecastMap0 = document.getElementById("forecastMap0");
				                  	forecastMap0 = echarts.init(forecastMap0);
				                  	forecastMap0.setOption(tpls.forecastMap0,true);
		                	}
		          		}
		          	})
        		}
        	},
        	proposalMap0Data:function(page,oldPage,key){
        		var dataThis = this;
        		if(Boolean(key)){
        			dataThis.postData.demand_date=key;
        		}else if(dataThis.isSeach){
        			dataThis.postData={
	                	"item_big_class":$(".select").find("input[name='kucundalei']").attr("data"),
		                "item_small_class":$(".select").find("input[name='kucunxiaolei']").attr("data"),
		                "item":$(".select").find("input[name='wuliaobianhao']").attr("data"),
		                "plan_class":$(".select").find("input[name='jihualeibie']").attr("data"),
		                "category":$(".select").find("input[name='zhinengfenlei']").attr("data"),
		                "buyer":$(".select").find("input[name='caigouyuan']").attr("data"),
		                "souring":$(".select").find("input[name='sourcing']").attr("data"),
		                "planner":$(".select").find("input[name='jihuayuan']").attr("data"),
		                "demand_date":$(".select").find("input[name='jueceriqi']").attr("data"),
		                "page":1
	                }
        		}else{
        			dataThis.postData={
	                	"item_big_class":"",
		                "item_small_class":"",
		                "item":"",
		                "plan_class":"",
		                "category":"",
		                "buyer":"",
		                "souring":"",
		                "planner":"",
		                "demand_date":"",
		                "page":1
	                }
        		}
            	if(page != oldPage){
            		dataThis.tableLoadding = true;
            		dataThis.tableShow = false;
            		if(typeof page !="boolean"){
            			dataThis.postData.page = page;
            		}
		            common.getData(0,common.url_constitute.forecastMpa1,"post",dataThis.postData,function(data){
		                dataThis.tableLoadding = false;
		                if(data.data.code==1024){
		                	if(data.data.table.items.length<1){
		                		dataThis.tableShow = false;
		                		dataThis.noData0 = true;
		                	}else{
		                		dataThis.tableShow = true;
		                		dataThis.noData0 = false;
			                	dataThis.tableTitle = data.data.table_title;
			                	for(var i=0;i<data.data.table.items.length;i++)
			                	{
			                		data.data.table.items[i].a = common.tofixeds(data.data.table.items[i].a);
			                		data.data.table.items[i].a2 = common.tofixeds(data.data.table.items[i].a2);
			                		data.data.table.items[i].b = common.tofixeds(data.data.table.items[i].b);
			                		data.data.table.items[i].b2 = common.tofixeds(data.data.table.items[i].b2);
			                		data.data.table.items[i].c = common.tofixeds(data.data.table.items[i].c);
			                		data.data.table.items[i].c2 = common.tofixeds(data.data.table.items[i].c2);
			                		data.data.table.items[i].d = common.tofixeds(data.data.table.items[i].d);
			                		data.data.table.items[i].d2 = common.tofixeds(data.data.table.items[i].d2);
			                		data.data.table.items[i].e = common.tofixeds(data.data.table.items[i].e);
			                		data.data.table.items[i].e2 = common.tofixeds(data.data.table.items[i].e2);
			                	}
			                	dataThis.tableList	= data.data.table;
			                	dataThis.week_day = data.data.week_day;
		                	}
		                }
		            });
		        }
            },
            proposalMap1Data:function(){
            	var dataThis = this;
            	if(dataThis.isSeach){
        			dataThis.postData1={
	                	"item_big_class":$(".select").find("input[name='kucundalei']").attr("data"),
		                "item_small_class":$(".select").find("input[name='kucunxiaolei']").attr("data"),
		                "item":$(".select").find("input[name='wuliaobianhao']").attr("data"),
		                "plan_class":$(".select").find("input[name='jihualeibie']").attr("data"),
		                "category":$(".select").find("input[name='zhinengfenlei']").attr("data"),
		                "buyer":$(".select").find("input[name='caigouyuan']").attr("data"),
		                "souring":$(".select").find("input[name='sourcing']").attr("data"),
		                "planner":$(".select").find("input[name='jihuayuan']").attr("data"),
		                "demand_date":$(".select").find("input[name='shijian']").val(),
		                "page":1
	                }
        		}else{
        			dataThis.postData1={
	                	"item_big_class":"",
		                "item_small_class":"",
		                "item":"",
		                "plan_class":"",
		                "category":"",
		                "buyer":"",
		                "souring":"",
		                "planner":"",
		                "demand_date":"",
		                "page":1
	                }
        		}
            	common.getData(1,common.url_constitute.forecastMpa2,"post",dataThis.postData1,function(data){
	          		dataThis.tableLoadding1 = false;	//隐藏loadding
	          		if(data.data.code==1024){
	          			if(data.data.result.length<1){
	                		dataThis.tableShow1 = false;
	                		dataThis.noData1 = true;
	                	}else{
	                		dataThis.noData1 = false;
							dataThis.tableShow1 = true;		//显示数据dom
		          			var xAxis = [];			//x坐标数据
			          		var freeze_demand = [];	//折线-冻结需求数据
			          		var final_predict = [];	//折线-最终预测需求数据
			          		var sum	= [];			//折线-合计数据
			          		dataThis.mapTitle = "物料 "+data.data.result[0].item;
			          		for(var i=0;i<data.data.result.length;i++){
			          			xAxis.push(data.data.result[i].TRANSACTION_DATE);
			          			freeze_demand.push(data.data.result[i].freeze_demand);
			          			final_predict.push(data.data.result[i].final_predict);
			          			sum.push(data.data.result[i].sum);
			          		}
			          		tpls.forecastMap0.xAxis.data = xAxis;
			          		tpls.forecastMap0.series[0].data = freeze_demand;
			          		tpls.forecastMap0.series[1].data = final_predict;
			          		tpls.forecastMap0.series[2].data = sum;
			          		var forecastMap0 = document.getElementById("forecastMap0");
			                  	forecastMap0 = echarts.init(forecastMap0);
			                  	forecastMap0.setOption(tpls.forecastMap0,true);
	                	}
	          		}
	          	})
            },
            saveFunction:function(){
            	var dataThis = this;
            	common.getData(-1,common.url_constitute.forecastMpa3,"post",dataThis.postWrite,function(data){
	          		alert(data.data.message);
	          	})
            }
        },
        created(){
        	this.proposalMap0Data(1);
        	//this.proposalMap1Data();
        	this.selectWeek();
        },
        mounted(){
            common.selectFunction();
            common.setSelect();
            common.selectDate("#calend");
        }
    }
</script>

<style>
</style>
